<template>
	<view >
	<!--  -->
		<view class="interval-20">
			<text class="grey-text-s22">请选择反馈的内容</text>
		</view>
		<view class="bg-white">
			<view class="interval-20 row">
				<!-- 反馈类型列表 -->
				<view v-for="(item,index) in tpyeList" :key="index" class="flex-cs radio-list-message" @tap="IsCheck(item.value)">
					<text class="font-s28-3c">{{item.name}}</text>
					<radio class="pad-left" :checked=" checked ==  item.value"  :value="item.value+''"></radio>
				</view>	
				<view class="position-r interval-20"  >
					<text class=" mar-t20 mar-l20 font-s28-3c"> 请详细描述 <text class="red">*</text></text>
					<textarea class="textarea-disc grey-text-s22"  maxlength="300" placeholder="请输入..."
					  v-model="disc"></textarea>
					 <text class="countNum grey-text-s22">{{tatVal}}/300</text>
				</view>
				<view>
					<text class="grey-text-s22">上传凭证 （最多5张） {{feedbackData.imgList.length}}/5</text>
				</view>
			</view>
			<!-- form -->
			<view class="interval-20 cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in feedbackData.imgList" :key="index" @tap="ViewImage" :data-url="feedbackData.imgList[index]">
					 <image :src="feedbackData.imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="feedbackData.imgList.length<5">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<text class="grey-text-s22">图片仅支持 jpeg、jpg、png格式</text>
			<!-- form -->
			
			<button  class="interval-20  align-btn-bottom" :class=" submitCheck ? 'bg-grey ' :  'bg-blue'" :disabled="submitCheck">提交</button>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				checked : 0,
				feedbackData : {
					type : 0, //0 小程序异常 ， 1 支付问题 ， 2 售后问题 ，3 其他 ，4 意见与建议  
					disc : '',  //问题描述
					imgList : []  //图片
				},
				tpyeList : [
					{"name" : '小程序异常','value':0},
					{"name" : '支付问题','value':1},
					{"name" : '售后问题','value':2},
					{"name" : '其他','value':3},
					{"name" : '意见与建议','value':4}
				],
				submitCheck : true ,
				tatVal : 0,
				disc : ''
			}
		},
		watch: {
			disc : function  (newval,oldval) {
				this.tatVal = newval.length;
				this.feedbackData.disc = newval;  //赋值到反馈信息集合
				if(this.tatVal == 300){
                    uni.showToast({
                        icon: 'none',
                        title: '最多只能輸入300個字'
                    });
                };
				if(newval.split("").length!= 0){
					this.submitCheck = false ;
				}else{
					this.submitCheck = true ;
				}
				
			}
		}
		,
		methods: {
			IsCheck(id){
				this.checked = id;
				this.feedbackData.type = id;
			},

			ChooseImage() {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.feedbackData.imgList.length != 0) {
							this.feedbackData.imgList = this.feedbackData.imgList.concat(res.tempFilePaths)
						} else {
							this.feedbackData.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.feedbackData.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.feedbackData.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
			
		}
	}
</script>

<style>
	.pad-left {
		transform:scale(0.7)
	}
	/* 两端布局 */
	.radio-list-message {
		height: 88upx;
		border-bottom: 2upx solid #f8f5f5;
		width: 96%;
		margin: auto;
	}
	.item-title {
		padding-left: 10upx;
		
	}
	
	.grey-text-s22 {
		font-size: 22upx;
		color: #b4b4b4 ;
		margin: 20upx;
	}
		
	.textarea-disc {
		margin: 20upx auto;
	    width: 95%;
		background-color: #f7f7f7 !important;
		padding : 20upx;
		color: black;
	}
	
	.position-r{
		position: relative;
	}
	
	.countNum {
		position: absolute;
		right: 30upx;
		bottom: 0upx;
	}
	
	.uni-button , .uni-button:after{
		border: none !important;
		border-radius: 0upx !important;
	} 
	
	.align-btn-bottom {
		/* position: absolute; */
		margin-top: 300upx;
		bottom: 0;
		width: 100%;
	}
	
	
	.uni-textarea-textarea {
		color: #3C3C3C !important;
		font : 500 !important;
	}
	
</style>
